import React, { Component, PropTypes } from 'react';

import '../BodyDataInput.scss';
import LayoutView, { LayoutMode } from '../../layout';
import { SelectItemList, SelectItem } from '../../common-ui-parts';
import { BodyItemConstant as BiC } from '../../../constants/InputItemConstants';
import { BodyDataInputContextConstant } from '../../../constants/ComponentContextConstants';
import { MultipleValidationCategory as MvC } from '../../../validations/BodyDataInputValidation';


// 質問に関するイラスト
import imgQ11 from './images/imgQ11.png';

/**
 * Q11.血圧
 */
class Question11 extends Component {
  getChildContext() {
    const { [BiC.MAX_BLOOD_PRESSURE]: max, [BiC.MIN_BLOOD_PRESSURE]: min } = this.context.parent.inputData;
    return Object.freeze({
      parent: Object.freeze(Object.assign({}, this.context.parent, {
        // 未入力項目がある場合、[次へ]ボタンは無効
        disabledNext: [max, min].some(input => input === undefined || input === ''),
      })),
    });
  }

  shouldComponentUpdate(nextProps, nextState) {
    return this.context.parent.pageIndex === nextProps.index;
  }

  scrollPageTop() {
    this.refs.layoutView.getWrappedInstance().scrollTop();
  }

  validatePage() {
    // 入力チェック（true:チェックOK）
    return this.context.parent.validateQuestionPage([BiC.MAX_BLOOD_PRESSURE, BiC.MIN_BLOOD_PRESSURE], [MvC.BLOOD_PRESSURE]);
  }

  render() {
    const { inputData, errorInfo, updateState } = this.context.parent;
    return (
      <LayoutView
        ref="layoutView"
        mode={LayoutMode.QUESTION}
        title="血圧"
        question={{
          no: 11,
          sentence: <p>最高血圧・最低血圧を入力してください。<br/><span className="reference" >（高血圧の基準値：140/90 mmHg以上）</span></p>,
          illustSrc: imgQ11,
          illustHeight: 246,
          helpText:
            <blockquote>
              <p>高血圧の基準値：<br/>140/90 mmHg以上</p>
              <p>参考文献：<br/><cite>日本高血圧学会　高血圧治療ガイドライン 2014</cite></p>
            </blockquote>,
        }}
        errorText={errorInfo.get(BiC.MAX_BLOOD_PRESSURE, BiC.MIN_BLOOD_PRESSURE, MvC.BLOOD_PRESSURE)}
      >
        {/* 最高血圧 */}
        <dl className="content">
          <dt className="blood-pressure">{BiC.MAX_BLOOD_PRESSURE.label}</dt>
          <dd>
            <SelectItemList className="narrow-list"
              name={BiC.MAX_BLOOD_PRESSURE}
              value={inputData[BiC.MAX_BLOOD_PRESSURE]}
              placeholder="選択してください"
              propagate={updateState}
            >
              {BiC.MAX_BLOOD_PRESSURE.choices.map((choice, index) => (
                <SelectItem key={index} value={choice.value} label={choice.label} />
              ))}
            </SelectItemList>
          </dd>
        </dl>

        {/* 最低血圧 */}
        <dl className="content">
          <dt className="blood-pressure">{BiC.MIN_BLOOD_PRESSURE.label}</dt>
          <dd>
            <SelectItemList className="narrow-list"
              name={BiC.MIN_BLOOD_PRESSURE}
              value={inputData[BiC.MIN_BLOOD_PRESSURE]}
              placeholder="選択してください"
              propagate={updateState}
            >
              {BiC.MIN_BLOOD_PRESSURE.choices.map((choice, index) => (
                <SelectItem key={index} value={choice.value} label={choice.label} />
              ))}
            </SelectItemList>
          </dd>
        </dl>
      </LayoutView>
    );
  }

}

Question11.contextTypes = BodyDataInputContextConstant;
Question11.childContextTypes = Question11.contextTypes;

/*Question11.propTypes = {
  index: PropTypes.number,    // 自ページINDEX（0～）
};*/

export default Question11
